import React, { Component } from 'react';
import SearchInput from '../searchInput/Index';
import { NavBar } from 'antd-mobile';
// import { getCategoryInfo } from '../../store/actionCreator/home'
import './index.css';
// import store from '../../store/index';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
class Catetory extends Component {
  componentDidMount() {
    // store.dispatch(getCategoryInfo())
  }
  state = {
    select_index: 0,   //左边选中数据得下标
    category_list: [],
    category_rightContent:[]
  }
  getcontent = (e) => {
    // 获取选中元素的data-index
    let select_index = e.target.getAttribute('data-index');
    // console.log(select_index);
    this.setState({
      select_index: parseInt(select_index),
      category_rightContent: this.props.category_list[select_index].children
    })
  }

  render() {
    return (
      <div className="yg-category">
        <div className="yg-category-title">
          <NavBar className="category-title">优购商城</NavBar>
        </div>
        {/* 顶部搜索框开始 */}
        <div className="yg-category-search">
          <div className="category-search-item" onClick={this.handleSearch}>
            <SearchInput></SearchInput>
          </div>
        </div>
        {/* 顶部搜索框结束 */}
        {/* 内容部分开始 */}
        <div className="yg-category-content">
          <div className="category-content-left" onClick={this.getcontent}>
            {this.props.category_list.map((v, i) => {
              return <div className={this.state.select_index === i ? "active content-left-item" : "content-left-item"} key={v.cat_id} data-index={i}>
                {v.cat_name}
              </div>
            })}
          </div>
          <div className="category-content-right">
            {this.props.category_rightContent.map((v, j) => {
              return (
                <div className="content-right-item" key={j}>
                  {/* 二级菜单标题开始 */}
                  <div className="right-item-title">
                    {'/'}
                    {v.cat_name}
                    {'/'}
                  </div>
                  {/* 二级菜单标题结束 */}
                  {/* 产品列表开始 */}
                  <div className="product-list">
                    {v.children && v.children.map((item, k) => {
                      return (
                        <div className="product-list-item" key={k}>
                          <img src={item.cat_icon} alt="" />
                          <div className="title">{item.cat_name}</div>
                        </div>
                      )
                    })}
                  </div>
                  {/* 产品列表结束 */}
                </div>
              )
            })}
          </div>
        </div>
        {/* 内容部分结束 */}
      </div>
    );
  }
}
let mapStateToProps = (state) => {
  // console.log(state.category_list);
  return {
    category_list: state.category_list,
    category_rightContent: state.category_rightContent,
  }
}
export default withRouter(connect(mapStateToProps, null)(Catetory));
